<template>
    <div id="code-editor" ref="codeEditorRef" style="min-height: 600px; height: 80vh;" />
  </template>
  
  <script setup lang="ts">
  import * as monaco from "monaco-editor";
  import {withDefaults,defineProps } from 'vue';
  import { onMounted, ref, toRaw,watch } from "vue";
  
  interface Props{
    value: string;
    language?: string;
    handleChange:(v: string)=>void;
  }

  const props=withDefaults(defineProps<Props>(),{
    value:()=>"",
    language: () => "java",
    handleChange: (v:string)=>{
        console.log(v);
    }
  })

  const codeEditorRef = ref();
  const codeEditor = ref();
  
  watch(
  () => props.language,
  () => {
    if (codeEditor.value) {
      monaco.editor.setModelLanguage(
        toRaw(codeEditor.value).getModel(),
        props.language
      );
    }
  }
);

  // const fillValue = () => {
  //   if (!codeEditor.value) {
  //     return;
  //   }
  //   // 改变值
  //   toRaw(codeEditor.value).setValue("新的值");
  // };
  
  onMounted(() => {
    if (!codeEditorRef.value) {
      return;
    }
    // Hover on each property to see its docs!
    codeEditor.value = monaco.editor.create(codeEditorRef.value, {
      value: props.value,
      language: props.language,
      automaticLayout: true,
      colorDecorators: true,
      minimap: {
        enabled: false,
      },
      readOnly: false,
      theme: "vs-dark",
      // lineNumbers: "off",
      // roundedSelection: false,
      // scrollBeyondLastLine: false,
    });
    codeEditor.value.onDidChangeModelContent(()=>{
      props.handleChange(toRaw(codeEditor.value).getValue());
    })
  });

  </script>
  
<style scoped>


</style>